<template>
  <!--重点产品现状分析功能-->
  <div class="rightBox">
    <div class="topBox">
      <el-row>
        <el-col :span="spanCol" >
          <div style="margin:0 .5vw" >
            <chart-block ref="firstChart" v-show="firstChartShow"  chartID="chart1" :title="firstData.title" :optionData="firstData" chartType="getBar" height="48vh" style="padding:0 1vh 2vh 0;margin-top:1vh;"></chart-block>
          </div>         
        </el-col>
        <el-col :span="spanCol" >
          <div style="margin:0 .5vw">
            <chart-block ref="secondChart" v-show="secondChartShow" chartID="chart2" :title="secondData.title" :optionData="secondData" chartType="getShadowLine" height="48vh" style="padding:0 1vh 2vh 0;margin-top:1vh;" titleType="blueBig"></chart-block>
          </div>
        </el-col>
        <el-col :span="spanCol" >
          <div style="margin:0 .5vw">
            <chart-block ref="thirdChart" v-show="thirdChartShow" chartID="chart3" :title="thirdData.title" :optionData="thirdData" chartType="getSingleLine" height="48vh" style="padding:0 1vh 2vh 0;margin-top:1vh;" titleType="blueBig"></chart-block>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="bottomBox">
      <el-col span="24">
        <div style="margin:0 .5vw">
          <div class="title blueBig">{{ title }}</div>
          <!-- <table-block :oprData="tableData" :isTitle="true" :title="youjiTitle" :pageSize="pageSize" :total="total" @currentChange="currentChange" :currePage="currePage"></table-block> -->
          <table class="org-table" border="1" cellpadding="1" cellspacing="1" align="center" style="width:100%;">
            <tr>
              <th align="center">排名</th>
              <th align="center">区县</th>
              <th align="center">总产量(万吨)</th>
              <th align="center">排名</th>
              <th align="center">区县</th>
              <th align="center">总产量(万吨)</th>
              <th align="center">排名</th>
              <th align="center">区县</th>
              <th align="center">总产量(万吨)</th>
              <th align="center">排名</th>
              <th align="center">区县</th>
              <th align="center">总产量(万吨)</th>
              <th align="center">排名</th>
              <th align="center">区县</th>
              <th align="center">总产量(万吨)</th>
            </tr>
            <tr v-for="(stu,index) in tableDataItem" :key="index">
              <td align="center">{{ stu.ind }}</td>
              <td align="center">{{ stu.area_name }}</td>
              <td align="center">{{ stu.cl }}</td>
              <td align="center">{{ stu.ind1 }}</td>
              <td align="center">{{ stu.area_name1 }}</td>
              <td align="center">{{ stu.cl1 }}</td>
              <td align="center">{{ stu.ind2 }}</td>
              <td align="center">{{ stu.area_name2 }}</td>
              <td align="center">{{ stu.cl2 }}</td>
              <td align="center">{{ stu.ind3 }}</td>
              <td align="center">{{ stu.area_name3 }}</td>
              <td align="center">{{ stu.cl3 }}</td>
              <td align="center">{{ stu.ind4 }}</td>
              <td align="center">{{ stu.area_name4 }}</td>
              <td align="center">{{ stu.cl4 }}</td>
            </tr>
          </table>
        </div>
      </el-col>
    </div>
  </div>
</template>

<script>
import {
  getProudctList,
  getProudctData,
  getProudctData1,
  getProudctData2
} from '@/api/pages.js'
export default {
  name: "index-mining",
  components: {
    ChartBlock: () => import('@/components/chart-block'),
    TableBlock: () => import('@/components/table-block'),
  },
  props: {
    itemCode: {
      type: String,
      default: () => {
        return ''
      }
    },
    curYear: {
      type: String,
      default: () => {
        return ''
      }
    },
  },
  data() {
    return {
     firstChartShow:true,
     secondChartShow:true,
     thirdChartShow:true,
     spanCol:12,
      firstData: {
        seriesData: [
          {
            name: '', //如果有图例，这个就不能为空
            data: [], //数据
            unit: '', //数据的单位
          }, {
            name: '', //如果有图例，这个就不能为空
            data: [], //数据
            unit: '', //数据的单位
          },
        ],
        BarGradientColor: [//柱状图渐变色
          {
            topColor: '#0DCCFF',
            bottomColor: '#4760FF'
          },
          {
            topColor: '#47FF72',
            bottomColor: '#E587FE'
          },
        ],
        lineColor: {
          linearColor: '#FF9F15',//线条颜色
          radiusColor: '#FF9F15',//折线点颜色
          borderColor: '#a6660d',//折线点边框颜色
        }
      },
      secondData: {
        LinearGradientColor: [//柱状渐变颜色
          {
            topColor: 'rgba(0,88,255,0.8)',
            bottomColor: 'rgba(0,88,255,0.1)',
            LineCircleColor: "#0058FF",//折线图颜色
            LineCircleBorderColor: "#00eaff",//折线图描边颜色
          },
          {
            topColor: 'rgba(211,89,0,0.8)',
            bottomColor: 'rgba(211,89,0,0.1)',
            LineCircleColor: "#D35900",//折线图颜色
            LineCircleBorderColor: "#F28E26",//折线图描边颜色
          }
        ],
        seriesData: [
          {
            name: '', //如果有图例，这个就不能为空
            data: [], //数据
            unit: '', //数据的单位
          },
        ],
      },
      thirdData:{
        seriesData: [
          {
            name: '', //如果有图例，这个就不能为空
            data: [], //数据
            unit: '', //数据的单位
          },
          {
            name: '', //如果有图例，这个就不能为空
            data: [], //数据
            unit: '', //数据的单位
          },
        ],
        LinearGradientColor:[//渐变色
					{ //折线图两侧竖线数据渐变色
						topColor:"rgba(183, 89, 255, 1)",
						bottomColor:"rgba(183, 89, 255, 0)"
					},
					{//折线图填充区域渐变色
						topColor:"rgba(183, 89, 255,.2)",
						bottomColor:"rgba(183, 89, 255, 0)"
					},
				],
				LineCircleColor:"#B759FF",//折线图颜色
				lineRadiusColor:"#B759FF",//折线图圆点颜色
				LineCircleBorderColor:"#B759FF",//折线图描边颜色
      },
      pageSize: document.body.clientWidth > 1400 ? 15 : 8,
      total: 0,
      totalPage: 0,
      oprData: {
        list: [],
        tableData: [],
      },
      currePage: 1,
      youjiTitle: '有机农产品区县榜单',
      tableData: [
        {area_name: '111', cl: '111'},
        {area_name: '222', cl: '222'},
        {area_name: '333', cl: '333'},
        {area_name: '444', cl: '444'},
        {area_name: '555', cl: '555'},
        {area_name: '111', cl: '111'},
        {area_name: '222', cl: '222'},
        {area_name: '333', cl: '333'},
        {area_name: '444', cl: '444'},
        {area_name: '555', cl: '555'},
      ],
      tableDataItem: [],
      title: ''
    }
  },
  computed: {},
  created() {
  },
  mounted() {

    // 近10年价格监测
    this.getProudctData('NY05', this.itemCode);
    // 近10年**产量
    this.getProudctData1('NY07', this.itemCode);
    // 近10年**播种面积
    this.getProudctData2('NY08', this.itemCode);
    //this.changeSpanCol();
    // 列表
    this.getProudctList('NY09',   this.itemCode, this.curYear );    
  },
  methods: {
    currentChangeWgh(e) {
      this.currePageWgh = e
      this.getProudctList('NY09',  this.itemCode, this.curYear);
    },
    changeSpanCol(){
     
      if(this.secondChartShow&&this.thirdChartShow){
          this.spanCol = 8;
       }else{
          this.spanCol = 12;
       }

        this.$refs['firstChart'].myChart.resize();  
        if(this.secondChartShow)  
        this.$refs['secondChart'].myChart.resize();  
        if(this.thirdChartShow)
        this.$refs['thirdChart'].myChart.resize();   
    
         
       
    },
    getProudctList(busiCode, name, year) {
      getProudctList(busiCode, name, year).then(res => {
        if (res.data.code === 200) {
          this.oprData.list = res.data.data.list.records
          this.total = res.data.data.list.total
          this.oprData.tableData = res.data.data.tableData

          this.title = year + '年各区县' + name + '产量对比'

          res.data.data.list.forEach((row, index) => {
            row.ind = index + 1;
            this.tableDataItem = [];
            var split = parseInt(res.data.data.list.length / 5);
            if (res.data.data.list.length % 5 > 0) {
              split++;
            }
            for (var j = 0; j < split; j++) {
              var sturow = {};
              for (var i = 0; i < 5; i++) {
                var index = i * split + j;
                var crow = res.data.data.list[index];
                if (crow) {
                  switch (i) {
                    case 0:
                      sturow.ind = crow.ind;
                      sturow.area_name = crow.area_name;
                      sturow.cl = crow.cl;
                      break;
                    case 1:
                      sturow.ind1 = crow.ind;
                      sturow.area_name1 = crow.area_name;
                      sturow.cl1 = crow.cl;
                      break;
                    case 2:
                      sturow.ind2 = crow.ind;
                      sturow.area_name2 = crow.area_name;
                      sturow.cl2 = crow.cl;
                      break;
                    case 3:
                      sturow.ind3 = crow.ind;
                      sturow.area_name3 = crow.area_name;
                      sturow.cl3 = crow.cl;
                      break;
                    case 4:
                      sturow.ind4 = crow.ind;
                      sturow.area_name4 = crow.area_name;
                      sturow.cl4 = crow.cl;
                      break;
                  }
                }
              }
              this.tableDataItem.push(sturow);
            }
          })
        }
      }).catch(err => {

      })
    },

    // 近10年粮食产量
    getProudctData1(busiCode, name){
      getProudctData1({busiCode:busiCode, name:name}).then(res=>{
        if(res.data.code==200){
          this.firstData = {
            labelRorate:'40',
            title: res.data.data.title,
            categoryAxis: res.data.data.categoryAxis, //类目轴数据
            seriesData: res.data.data.seriesData,
            color:["#03cefa","#f1db25","#fd664d"],
            // isLine: true,
            LinearGradientColor: [//柱状图渐变色
              {
                topColor: 'rgba(12, 252, 255, 1)',
                bottomColor: 'rgba(77,228,229, 0)'
              },
              {
                topColor: '#47FF72',
                bottomColor: '#E587FE'
              },
            ]
          }
        }
      }).catch(err=>{

      })
    },
    // 近十年粮食播种面积
    getProudctData2(busiCode, name) {
      getProudctData2({busiCode:busiCode, name:name}).then(res=>{
        if (res.data.code == 200) {
          var datas = res.data.data.seriesData[0].data;
          if(datas&&datas.length==0){
            this.secondChartShow = false; 
          }else{
            this.secondChartShow = true;      
          }
          this.changeSpanCol();
          this.secondData = {
            labelRorate:'45',
            title: res.data.data.title,
            categoryAxis: res.data.data.categoryAxis, //类目轴数据
            seriesData: res.data.data.seriesData,
            smooth: true,
            legendShow: 'no',
            LinearGradientColor: [//柱状渐变颜色
              {
                topColor: 'rgba(211,89,0,0.8)',
                bottomColor: 'rgba(211,89,0,0.1)',
                LineCircleColor: "#D35900",//折线图颜色
                LineCircleBorderColor: "#F28E26",//折线图描边颜色
              }
            ],
            min:0
           // min:name=="粮食"?0: Math.floor(Math.min(...datas))//最小值
          }
        }
        
      }).catch(err => {

      })
    },
    // 近十年粮食价格监测
    getProudctData(busiCode, name){
       getProudctData({busiCode:busiCode, bigtype:name}).then(res=>{
        console.log('3453', res)
        if(res.data.code==200){
          let datas = res.data.data.seriesData[0].data
          let lineData =new Array(datas.length)
          for(let i=0;i<lineData.length;i++){
            if(i==0){
              lineData[0]=datas[0]
            }else if(i==lineData.length-1){
              lineData[lineData.length-1]=datas[lineData.length-1]
            }else{
              lineData[i]=0
            }
          }
           if(lineData&&lineData.length==0){
            this.thirdChartShow = false;         
          }else{
            this.thirdChartShow = true;           
          }
          this.changeSpanCol();
          this.thirdData = {                      
            labelRorate:name=="蔬菜"?'55':0,
            title:res.data.data.title,
            categoryAxis: res.data.data.categoryAxis, //类目轴数据
            seriesData: [
              {
                data: lineData,//折线图两侧竖线数据
              },
              res.data.data.seriesData[0]
            ],
            LinearGradientColor:[//渐变色
					{ //折线图两侧竖线数据渐变色
						topColor:"rgba(183, 89, 255, 1)",
						bottomColor:"rgba(183, 89, 255, 0)"
					},
					{//折线图填充区域渐变色
						topColor:"rgba(183, 89, 255,.2)",
						bottomColor:"rgba(183, 89, 255, 0)"
					},
				],
				LineCircleColor:"#B759FF",//折线图颜色
				lineRadiusColor:"#B759FF",//折线图圆点颜色
				LineCircleBorderColor:"#B759FF",//折线图描边颜色
          }
        }
      }).catch(err=>{

      })
    },
  },
  watch: {
    itemCode: {
      handler(val) {
        // 近10年价格监测
        this.getProudctData('NY05', val);
        // 近10年**产量
        this.getProudctData1('NY07', val);
        // 近10年**播种面积
        this.getProudctData2('NY08', val);   
        // 列表
        this.getProudctList('NY09',   val, this.curYear );
      }
    }
  }
}
</script>

<style scoped lang="scss">
.rightBox{
  width:100%;
  height:100%;
  .topBox{
    width:100%;
    height:58%;
  }
  .bottomBox{
    width:100%;
    height:41%;
    margin-top:1.5vh
  }
  .title {
		width: 100%;
		height: 3.98vh;
		margin-top: -1px;
		padding-left: 1vw;
		line-height: 3.98vh;
		color: #FFFFFF;
		font-size: 0.94vw;
		font-weight: bold;
		text-align: left;

		&.blueSmall {
			// background: url("../assets/images/chart_block_title_blue_sm.png") top center no-repeat;
			background: url("../../../assets/images/title-bg.png") top center no-repeat;
				background-size: 100% 100%;
		}
		&.blueBig {
			// background: url("../../../assets/images/chart_block_title_blue_big.png") top center no-repeat;
			background: url("../../../assets/images/title-bg.png") top center no-repeat;
			background-size: 100% 100%;
		}

		&.moreBlueBig {
			// background: url("../assets/images/chart_block_title_blue_more_big.png") top center no-repeat;
			// background-size: contain;
			background: url("../../../assets/images/title-bg.png") top center no-repeat;
			background-size: 100% 100%;
		}

		&.greenSmall {

		}

		&.greenBig {

		}
	}
}
</style>
<style lang="scss">
  .org-table {
    border: 0;
    th {
      background: transparent;
      color: #0CFCFF;
      border: 0px;
      height: 35px;
      line-height: 35px;
      font-size: 12px;
    }
    tr:nth-child(2n) {
      background-color: #2A7677;
    }
    td {
      color: #E7FFFC;
      height: 35px;
      line-height: 35px;
      font-size: 12px;
      border: 0px;
    }
  }

</style>
